<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>

<div id="a" style="...">
    <h3>组件插槽</h3>
    <test val="xxx">
        test
        <template #s1>自定义的 s1的内容1</template>
    </test>
    <hr>
    <test val="xxx">

    </test>

    <test val="xxx">
        test
        <template #s1>自定义的 s1的内容2</template>
    </test>

    <test val="xxx">
        test
        <template #s1>自定义的 s1的内容3</template>
    </test>
</div>
<script>

    Vue.component("test", {
        props: ["var"],
        template: `
      <div>
            <h4>插槽前</h4>
            <slot>默认插槽</slot>
            <slot name="s1">具名插槽 s1</slot>
            <h4>插槽后</h4>
      </div>
    `
    })
    var v = new Vue({
        el: "#a",
        data: {}
    })
</script>
</body>
</html>